<template>
  <main class="wss-container">
    <!-- 内容+展开按钮 -->
    <!-- <i class="contentWidth el-icon-arrow-left" @click="contentOpen"></i> -->
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="8">
          <NewCard
            title="咨询列表"
            v-hasPermi="['financial:order:expertOrder']"
          >
            <template>
              <div class="leftTable">
                <div class="leftSearch" v-if="isRolesShow()">
                  <el-popover placement="bottom" width="160">
                    <el-input
                      v-model="searchIssueText"
                      size="mini"
                      clearable
                      @blur="searchIssue"
                      @input="searchIssue"
                      placeholder="输入关键字搜索"
                    />
                    <el-button
                      slot="reference"
                      icon="el-icon-search"
                      circle
                    ></el-button>
                  </el-popover>
                </div>
               
              </div>
            </template>
            <!-- :height="tableHeight" 自适应高度 -->
             <el-table
                  :data="waitingList"
                  :default-sort="{ prop: '', order: 'ascending' }"
                  :highlight-current-row="highlight"
                  @row-click="onRowClick"
                  style="width: 100%"
                  ref="probTable"
                  v-hasPermi="['financial:order:expertOrder']"
                  v-if="isRolesShow()"
                >
                  <el-table-column label="标题" width="70%" prop="title">
                    <template slot-scope="scope">
                    <svg-icon :icon-class="scope.row.status!='0'?'jxz_icon':'ywc_icon'"/>
                       <!-- <i :class="scope.row.status!='0'?'el-icon-circle-check':'el-icon-circle-close'"></i> -->
                      {{
                        scope.row.nickname +
                        "&nbsp" +
                        "--" +
                        "&nbsp" +
                        scope.row.title
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="剩余时间"
                    width="30%"
                    prop="createdTime"
                  >
                    <template slot-scope="scope">
                      {{getTime(scope.row.createdTime)}}
                      <!-- <DownTime
                        @EventTimeIsUp="TimeIsUp"
                        :time="scope.row.minutes"
                      ></DownTime> -->
                      <!-- {{ `${timesRem.h}:${timesRem.m}:${timesRem.s}` }} -->
                    </template>
                  </el-table-column>
                  
                </el-table>
                 <!-- 分页器 -->
                 <div class="pagination">
               <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="inquireParams.pageNum"
                :page-size="inquireParams.pageSize"
                layout="total, prev, pager, next"
                :total="inquireParams.total"
                :pager-count=5
              >
              </el-pagination>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="8">
          <NewCard title="咨询详情" :isright="true">
            <template slot="right">
              <div class="replyCount">
                <!-- 回复剩余时间： -->
                <!-- <i>{{`${timesRem.h}:${timesRem.m}:${timesRem.s}`}}</i> -->
                <!-- <i>
                  <DownTime
                    @EventTimeIsUp="TimeIsUp"
                    :time="this.time"
                  ></DownTime
                ></i> -->

                <svg-icon icon-class="xx_icon_nor" @click="message" />
              </div>
            </template>
            <div class="lineItem">
              <h2 v-show="selectRow.question" class="el-icon-menu">
                {{ selectRow && this.selectRowname + "--" + selectRow.type }}
              </h2>
              <h3 v-if="selectRow.question">问题详情</h3>
              <p>{{ selectRow.question }}</p>
              <!-- <span v-show="selectRow.createTime" class="el-icon-time">
                {{ selectRow && selectRow.createTime }}</span> -->
              <div
                class="accessory"
                v-if="
                  selectRow.questionAppend && selectRow.questionAppend.length
                "
              >
                <h3>追问</h3>
                <p
                  v-for="(
                    questionItem, questionIndex
                  ) in selectRow.questionAppend"
                  :key="questionIndex"
                >
                  <span class="question">
                    追问{{ turnChinese(questionIndex + 1) }} ：{{
                      questionItem
                    }}
                  </span>
                </p>
              </div>
              <div class="accessory">
                <h3 v-if="selectRow.files">用户附件</h3>
                <p
                  v-for="(item, index) in selectRow.files"
                  :key="index"
                  v-show="selectRow.files"
                  class="el-icon-document"
                >
                  <a :href="item">{{
                    item.substring(item.lastIndexOf("/") + 1)
                  }}</a>
                </p>
              </div>

              <div
                v-for="(answersItem, answersIndex) in selectRow.answers"
                class="lItemContent"
                :key="answersIndex"
              >
                <!-- 评论组件 -->
                <AwearItem :item="answersItem"></AwearItem>
              </div>
              <!-- {{selectRow.files}} -->

              <!-- <p v-for="(fileItem, index) in selectRow.files" :key="index">
                <a :href="fileItem.url"></a>
              </p> -->

              <!-- <div class="lItemContent el-icon-chat-line-square">
                用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问
              </div> -->
            </div>
          </NewCard>
        </el-col>
        <el-col :span="8" :class="{ byTwoThirds: byTwoThirdsClass }">
          <NewCard title="咨询回复">
            <div class="formalReply">
              <!-- 宽度扩大至3/2 -->
              <i
                class="expWidth"
                :class="[
                  { 'el-icon-arrow-left': isLeft },
                  { 'el-icon-arrow-right': isRight },
                ]"
                @click="clickbyTwoThirds"
              ></i>
              <!-- <WangEditor ref="wangEditor" :list="[]"></WangEditor> -->
              <!-- <Editor style="height: 100%"></Editor> -->
              <el-input
                type="textarea"
                :rows="20"
                placeholder="请填写..."
                resize="none"
                v-model="textarea"
                :disabled='oderstatus=="0"'
              >
              </el-input>
              <!-- 选择法条和附件 *************** -->
              <div class="lawOrFile">
                <!-- <el-button>法条</el-button> -->
                <!-- v-if="this.time>0" -->

                <h3 v-if="this.oderstatus!='0'" @click="queryLaw = true">
                  法条 <i class="el-icon-plus"></i>
                </h3>
                <h3 v-else>法条 <i class="el-icon-plus"></i></h3>
                <ul>
                  <li v-for="(law, index) in selectLawList" :key="index">
                    <el-tooltip
                      class="tooltipclass"
                      effect="dark"
                      placement="top"
                    >
                      <div slot="content">
                        <h3
                          style="
                            margin: 0;
                            color: #fff;
                            font-weight: bold;
                            font-size: 14px;
                            border-bottom: 1px solid #535151;
                            padding-bottom: 8px;
                            margin-bottom: 8px;
                          "
                        >
                          {{ law.lawTitle }}
                        </h3>
                        <p>
                          {{ law.content }}
                        </p>
                      </div>
                      <p>
                        {{ law.lawTitle }}
                        {{
                          law.content.substring(
                            0,
                            law.content.indexOf("条") + 1
                          )
                        }}
                      </p>
                    </el-tooltip>

                    <!-- law.content.slice(
                        law.content.indexOf("第"),
                        law.content.lastIndexOf("条") + 1
                      ) -->
                    <!-- <div slot="content" class="tooltip-div" >
                      <i></i>
                      <h3>{{ law.lawTitle }}</h3>
                      <p>
                        {{ law.content }}
                      </p>
                    </div> -->
                    <i @click="removeLawList(index)">删除</i>
                  </li>
                </ul>

                <el-upload
                  class="upload-demo"
                  action="#"
                  :auto-upload="false"
                  :on-change="getSelectFileList"
                  multiple
                  :file-list="selectFileList"
                  :show-file-list="false"
                  :disabled="oderstatus=='0'"
                >
                  <h3>附件 <i class="el-icon-plus"></i></h3>
                </el-upload>
                <ul>
                  <li v-for="(file, index) in selectFileList" :key="index">
                    {{ file.name }} <i @click="removeFileList(index)">删除</i>
                  </li>
                </ul>
              </div>
              <!-- 查法条 -->
              <Comdrawer
                size="88%"
                title="引用法条"
                @eventColse="queryLawClose"
                :drawer="queryLaw"
              >
                <div class="drawerMain">
                  <GetLaw @handlerLaw="handlerLaw" ref="child"></GetLaw>
                </div>
              </Comdrawer>
              <!-- 选择法条和附件******************* end-->

              <!-- <div class="queryBtn">
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="primary" @click="submitAC"
                  >提交并继续</el-button>
              </div> -->
              <SubBtn>
                <template slot="btn">
                  <el-button round @click="submit">取消</el-button>
                  <el-button
                    type="primary"
                    :disabled="oderstatus=='0'"
                    round
                    @click="submitAC"
                    >提交</el-button
                  >
                </template>
              </SubBtn>
              <div class="otherBtn">
                <el-button type="text" :disabled='oderstatus=="0"' @click="contentDrawer = true">
                  内容 <i class="el-icon-plus"></i>
                </el-button>
                <!-- <el-button :disabled='oderstatus=="0"' type="text" @click="queryLibrary  = true">政策</el-button>
                <el-button :disabled='oderstatus=="0"' type="text" @click=" caseBtn = true">解答</el-button> -->
                   <!-- <el-button type="text" @click="caseBtn = true"
                  >查案例</el-button
                >
                <el-button type="text" @click="queryLibrary = true"
                  >查智库</el-button
                > -->
                <!-- <el-button type="text" @click="calendarBtn = true"
                  >日历</el-button
                > -->
                <!-- <el-button type="text" @click="statisticsBtn = true"
                  >统计</el-button
                > -->

                <Comdrawer
                  size="100%"
                  title="内容查询"
                  @eventColse="contentClose"
                  :drawer="contentDrawer"
                  :showClose='false'>
                  <div class="drawerMain">
                    <Getcontent @handlepolicy="handlepolicy" ref="contentDrawerRef"></Getcontent>
                  </div>
                </Comdrawer>

                <Comdrawer
                  size="88%"
                  title="查政策"
                  @eventColse="handleClose"
                  :drawer="queryLibrary"
                >
                  <div class="drawerMain">
                    <Getpolicy @handlepolicy="handlepolicy" ref="child"></Getpolicy>
                  </div>
                </Comdrawer>

                <Comdrawer
                  size="88%"
                  title="查解答"
                  @eventColse="caseClose"
                  :drawer="caseBtn"
                >
                   <div class="drawerMain">
                  <Getanser @handleranser="handleranser" ref="child"></Getanser>
                </div>
                </Comdrawer>
                
                <!-- 查案例 -->
                <!-- <Comdrawer
                  size="95%"
                  title="查案例"
                  @eventColse="caseClose"
                  :drawer="caseBtn"
                >
                  <div class="simulation">
                    <Simulation></Simulation>
                  </div>
                </Comdrawer> -->
                <!-- 查智库 -->
                <!-- <Comdrawer
                  size="95%"
                  title="查智库"
                  @eventColse="handleClose"
                  :drawer="queryLibrary"
                >
                  <div class="drawerMain">
                    <QueryLibrary></QueryLibrary>
                  </div>
                </Comdrawer> -->

                <!-- 日历 -->
                <!-- <Comdrawer
                  size="60%"
                  title="日历"
                  @eventColse="calendarClose"
                  :drawer="calendarBtn"
                >
                  <div class="drawerMain">
                    <Calendar></Calendar>
                  </div>
                </Comdrawer> -->

                <!-- 统计 -->
                <!-- <Comdrawer
                  size="60%"
                  title="统计"
                  @eventColse="statisticsClose"
                  :drawer="statisticsBtn"
                >
                  <div class="drawerMain">
                    <Statistics></Statistics>
                  </div>
                </Comdrawer> -->
              </div>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import WangEditor from "@/wss/components/wangEditor.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";

import Getcontent from "./getcontent.vue"
import GetLaw from "./getLaw.vue";
import Getanser from "./getanser.vue";
import Getpolicy from "./getpolicy.vue";


import Simulation from "./simulation";
import QueryLibrary from "./queryLibrary.vue";
import Calendar from "./calendar.vue";
import Statistics from "./statistics.vue";

import { TurnChinese } from "@/wss/utils/wss.js";
import { getConfigListConsultApi } from "@/wss/newApi_3-24/base/config.js";
import {
  getPriceCommissionListApi,
  getPriceCommissionGetInfoApi,
} from "@/wss/newApi_3-24/financial/order.js";
import { getConsultEditApi } from "@/wss/newApi_3-24/doc/consult.js";
import { getConsultInsertAnswerApi,getUserProfileGetRoleIdApi } from "@/wss/newApi_3-24/doc/consult.js";
import AwearItem from "./awearItem.vue";
import DownTime from "@/components/downTime/index.vue";
import debounce from "lodash/debounce";
export default {
  name: "consulting",
  components: {
    NewCard,
    Comdrawer,
    WangEditor,
    Getcontent,
    GetLaw,
    Getanser,
    Getpolicy,
    QueryLibrary,
    Calendar,
    Statistics,
    AwearItem,
    SubBtn,
    Simulation,
    DownTime,
  },
  data() {
    return {
      expertId:'',//当前回复咨询的专家id

      // 搜索列表问题
      searchIssueText: "",
      textarea: "",
      //待回复列表 搜索值
      filterText: "",
      //待回复列表 数据
      waitingList: [],
      //待回复的名称
      selectRowname: "",
      //待回复列表 当前选择的数据
      selectRow: {},
      turnChinese: TurnChinese, //转换中文

      //待回复列表 搜索
      searchlist: "",
      //待回复列表 高亮
      highlight: true,
      //待回复列表 自适应表格高度
      tableHeight: 0,

      countdown: "",
      //中间回复倒计时
      timesRem: {
        timer: null,
        count: "",
        h: "00",
        m: "00",
        s: "00",
      },
      // 当前编辑的对象
      currentEdit: {},
      //正式回复
      formalReply: {},

      //正式回复 大纲的选中值
      outlineValue: "",

      //查案例
      caseBtn: false,
      //日历按钮
      calendarBtn: false,
      //统计按钮
      statisticsBtn: false,

      contentDrawer: false,//内容抽屉显示隐藏
      //查智库右侧抽屉是否显示
      queryLibrary: false,
      //查法条右侧抽屉是否显示
      queryLaw: false,
      //查法条输入内容
      queryLawValue: "",
      inquireParams: {
        pageNum: 1,
        pageSize: 10,
        total:0,
        title: null,
        // status: "3",
        type: 5,
      },
      //扩大三分之二的类名显示隐藏
      byTwoThirdsClass: false,
      //扩大向左图标显示隐藏
      isLeft: true,
      //扩大向右图标显示隐藏
      isRight: false,
      //订单状态
      oderstatus: "0",
      // 订单ID
      orderId: "",
      //禁用按钮
      disableds: false,
      // 当前点击的一项
      clickItem: {},

      // 已选的法条列表
      selectLawList: [],
      //选择的附件列表
      selectFileList: [],
    };
  },
  computed: {},
  async mounted() {
    this.getUserProfileGetRoleId() //获取专家的id

    //table固定表头，在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.probTable.$el.offsetTop - 160;
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.probTable.$el.offsetTop - 160;
      };
    });
    // this.countdown = true;

    // 内容+关闭按钮
    this.$bus.$on('closeContentBus',()=>{
      this.contentDrawer = false
    })
  },
  async created() {
    // 获取回答订单列表
    this.getPriceCommissionListFn();// 获取回答订单列表
    // await this.getConfigListConsultFn();
    // this.countTime(); //点击开始定时器
    // this.setCurrent(); //左边默认选中第一行
  },
  methods: {
    // 获取当前专家的id
    async getUserProfileGetRoleId(){
      let result = await getUserProfileGetRoleIdApi()
      if(result.code==200){
        this.expertId = result.expertId
      }
    },

    // 判断当前项目列表是否展示 根据角色
    isRolesShow() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin") || roles.includes("zxzj")) {
        return true;
      } else {
        return false;
      }
    },

    //查法条 显示隐藏
    queryLawClose() {
      this.queryLaw = false;
    },

    // 接收f法条传过来的数据
    handlerLaw(newCheckLaw) {
      console.log(newCheckLaw, "newCheckLaw");
      this.selectLawList = [...this.selectLawList, ...newCheckLaw];
      console.log(this.selectLawList);
      this.queryLaw = false;
      //  去清空子组件的选中值
      setTimeout(() => {
        this.$refs.child.Animation([]);
      }, 100);
    },

     // 接收解答传过来的数据
    handleranser(newCheckLaw) {
      let textarealsit=newCheckLaw
      let newarry=[]
      textarealsit.forEach(item => {
         newarry.push(item.content)
      });
       this.textarea=this.textarea+newarry
    
      this.caseBtn = false;
      //  去清空子组件的选中值
      setTimeout(() => {
        this.$refs.child.Animation([]);
      }, 100);
    },
    
     // 接收政策传过来的数据
    handlepolicy(newCheckLaw) {
      let textarealsit=newCheckLaw
      let newarry=[]
      textarealsit.forEach(item => {
        // 没有content字段就把item直接加入
        newarry.push(item.content ? item.content : item)
      });
      this.textarea=this.textarea+newarry
    
      this.queryLibrary = false;
      this.contentDrawer = false //关闭抽屉
      //  去清空子组件的选中值
      setTimeout(() => {
        this.$refs.contentDrawerRef.Animation([]);
      }, 100);
    },

    // async getConfigListConsultFn() {
    //   let { code, data } = await getConfigListConsultApi({
    //     name: "问题有效期限（小时）",
    //   });

    //   if (code != 200) return;
    //   this.time = data[0].value;
    // },

    // 回复
    submitAC: debounce(async function(){
      const currentEdit = this.currentEdit;
      if (!currentEdit.goodsId) {
        this.$message({
          type: "warning",
          message: "请选择咨询订单",
        });
        return;
      }

      if (this.textarea) {
        let form = new FormData();
        // console.log(this.selectLawList);
        // 咨询的id
        form.append("consultId", currentEdit.goodsId);
        // 回答的内容
        form.append("answer", this.textarea);
        // 判断当前咨询订单回复的最后一个id是否存在 并且 最后一条回复的专家id等于当前回复的专家id
        if (currentEdit?.goods?.answers[currentEdit.goods.answers.length-1]?.id && (currentEdit?.goods?.answers[currentEdit.goods.answers.length-1]?.expertId == this.expertId)) {
          form.append("answerId", currentEdit?.goods?.answers[0]?.id);
        }
        // 法条
        for (let index = 0; index < this.selectLawList.length; index++) {
          form.append(`law[${index}].id`, this.selectLawList[index].lawId);
          form.append(`law[${index}].itemId`, this.selectLawList[index].id);
          form.append(
            `law[${index}].title`,
            this.selectLawList[index].lawTitle
          );
          form.append(
            `law[${index}].content[0]`,
            this.selectLawList[index].content
          );
        }
        // 附件
        this.selectFileList.forEach((item, i) => {
          console.log(item, "123");
          form.append(`file`, item.raw);
        });
        // 发请求
        let { code, msg } = await getConsultInsertAnswerApi(form);
        if (code != 200) return;
        this.textarea = "";
        this.$message({
          type: "success",
          message: msg,
        });
        await this.getPriceCommissionListFn();
        // 问题点击
        this.onRowClick(this.clickItem);
      } else {
        this.$message({
          type: "warning",
          message: "请回复订单问题",
        });
      }
      return;
      const _this = this;
      let { answers } = _this.currentEdit.goods;
      console.log(answers, "赶紧起来");
      let paramsObj = {
        expertId: 1518159910444568576,
        expertName: "熊二",
        content: [
          {
            answer: _this.textarea,
            createTime: new Date().toLocaleDateString(),
          },
        ],
        id:
          _this.currentEdit.id +
          "_" +
          (_this.currentEdit.goods.answers.length + 1),
      };
      answers = paramsObj;
      _this.currentEdit.goods.answers.push(paramsObj);
      // let currentEdit = _this.currentEdit;
      //  把数据转换成form格式
      for (const key in currentEdit) {
        if (typeof currentEdit[key] == "object") {
          if (key == "goods") {
            currentEdit[key].answers.forEach((item, index) => {
              console.log(item, "有没有错，不是把");
              form.append(`answers[${index}].expertId`, 1518159910444568576);
              form.append(`answers[${index}].expertName`, "熊二");
              item.content.forEach((v, i) => {
                form.append(`answers[${index}].content[${i}].answer`, v.answer);
                form.append(
                  `answers[${index}].content[${i}].createTime`,
                  v.createTime
                );
              });
            });
          }
          // formDate.set(key, JSON.stringify(selectExpertInfo[key]), "blob");
          // formDate.set(key, selectExpertInfo[key]);
        } else {
          form.set(key, currentEdit[key]);
        }
      }
      let res = await getConsultEditApi(form);
    },500),
   
    // 取消回复
    async submit() {
      // 取消回复则清空文本框
      this.textarea = "";
    },
    //跳转到聊天室
    message() {
      // this.$router.push("/Bm-personalCenter/messageCenter", "orderNo");
      this.$router.push({
        path: "/Bm-personalCenter/messageCenter",
        query: { orderId: this.orderId },
      });
    },
    // 搜索问题列表
    searchIssue() {
      const _this = this;
      _this.inquireParams.title = _this.searchIssueText;
      _this.getPriceCommissionListFn();
    },
    // 获取回答订单列表
    async getPriceCommissionListFn() {
      const _this = this;
      let createdTime, result;
      let { code, data, rows,total } = await getPriceCommissionListApi(
        _this.inquireParams
      );
      if (code == 200) {
   
        _this.inquireParams.total=total
        // rows.forEach((item) => {
        //   createdTime = new Date(item.createdTime).getTime();
        //   createdTime += 1000 * 60 * 15;
        //   result = Math.floor(createdTime - Date.now());
        //   item.minutes = result;
        // });

        _this.waitingList = rows;
        // console.log(_this.waitingList, "minutesminutesminutes");
        // 获取所剩时间
        // _this.waitingList = JSON.parse(JSON.stringify(rows));
      }
    },
    // 时间处理函数
    getTime(days) {
      let time=days&&days.replace(/-/g, '')
      let newdays=time&&time.slice(2)
      let newtime=newdays.slice(0,newdays.length-3)
      // let time = days.split(" ")[0];
      // let arr = time.split("-");
      // return arr[0].slice(2) + arr[1] + arr[2];
      return newtime
    },
   
    //左边默认选中表格数据的第一行
    setCurrent() {
      this.$nextTick(() => {
        this.$refs.probTable.setCurrentRow(this.waitingList[0]);
        this.selectRow = this.waitingList[0];
        console.log(selectRow, "selectRow");
      });
    },
    // 选择订单
    async onRowClick(row) {
      //清空上一个回复的数据
      const _this = this;
      (_this.textarea = ""), (_this.selectLawList = []);
      _this.selectFileList = [];
      //订单时间的赋值
      _this.time = row.minutes;
      _this.clickItem = JSON.parse(JSON.stringify(row));
      // 获取订单列表
      let { code, data } = await getPriceCommissionGetInfoApi({
        id: row.id,
        type: 5,
      });
      if (code != 200 || !data) return;
      _this.selectRowname = data.nickname;
      _this.orderId = data.orderNo;
      _this.oderstatus=data.status
      _this.selectRow = JSON.parse(JSON.stringify(data.goods || {}));
      // let createTime, questioningTime, result;
      // createTime = new Date(data.goods && data.goods.createTime).getTime();
      // createTime += 1000 * 60 * 15;
      // result = Math.floor(createTime - Date.now());
      // this.time = result;
      // console.log(result, "resultresult");
      _this.currentEdit = JSON.parse(JSON.stringify(data));
      // 切换的时候清空正式回复
      // if (!this.clickItem.id) {
      _this.selectLawList = [];
      _this.selectFileList = [];
      // }
    },

    // 内容查询显示
    contentClose(){
      this.contentDrawer = false
    },

    //查案例 显示隐藏
    caseClose() {
      this.caseBtn = false;
    },
    //查智库 显示隐藏
    handleClose() {
      this.queryLibrary = false;
    },

    //日历 显示隐藏
    calendarClose() {
      this.calendarBtn = false;
    },
    //统计 显示隐藏
    statisticsClose() {
      this.statisticsBtn = false;
    },


    //中间倒计时
    // countTime() {
    //   //定义两个小时的秒数，此处根据需要进行定义
    //   const time = this.time * 60 *60;
    //   // console.log(time, "搞定了");
    //   if (!this.timesRem.timer) {
    //     this.timesRem.count = time;
    //     this.timesRem.timer = setInterval(() => {
    //       if (this.timesRem.count > 0 && this.timesRem.count <= time) {
    //         this.timesRem.count--;
    //         const h = parseInt(this.timesRem.count / (60 * 60));
    //         const m = parseInt((this.timesRem.count / 60) % 60);
    //         const s = parseInt(this.timesRem.count % 60);
    //         if (
    //           this.timesRem.h === 0 &&
    //           this.timesRem.m === 0 &&
    //           this.timesRem.s === 0
    //         ) {
    //           this.$message({
    //             message: "回复时间已到!",
    //             type: "warning",
    //           });
    //         } else {
    //           this.timesRem.h = h > 9 ? h : "0" + h;
    //           this.timesRem.m = m > 9 ? m : "0" + m;
    //           this.timesRem.s = s > 9 ? s : "0" + s;
    //         }
    //       } else {
    //         clearInterval(this.timesRem.timer);
    //         this.timesRem.timer = null;
    //       }
    //     }, 1000);
    //   }
    // },
    //倒计时 end

    // 内容+展开按钮
    contentOpen(){
      this.contentDrawer = true
    },

    //右侧扩大宽度
    clickbyTwoThirds() {
      this.byTwoThirdsClass = !this.byTwoThirdsClass;
      this.isLeft = !this.isLeft;
      this.isRight = !this.isRight;
    },

    //删除一条法条
    removeLawList(index) {
      this.selectLawList.splice(index, 1);
      console.log(this.selectLawList);
    },
    //关闭
    queryLawClose() {
      this.queryLaw = false;
    },

    // 上传附件的钩子
    getSelectFileList(file, fileList) {
      this.selectFileList = fileList;
    },

    //删除一条附件
    removeFileList(index) {
      this.selectFileList.splice(index, 1);
    },
    TimeIsUp() {},
      //分页函数
      currentChange(pageNum) {
      this.inquireParams.pageNum = pageNum;
      this.getPriceCommissionListFn();
    },
    // 页容量发生变化
    sizeChange(pageSize) {
      this.inquireParams.pageSize = pageSize;
      this.getPriceCommissionListFn();
    },
  },
  //   filters: {
  //   getMinutes(list) {
  //     getDownTime(list);
  //     return list.minutes;
  //   },
  // },
};
</script>

<style scoped>
h3,
h4,
ul,
li,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wss-container{
  position: relative;
}
.label-box-content {
  height: 100%;
}
.label-box-content >>> .top::after {
  height: 1px;
}
.el-row {
  height: 100%;
}
.el-card {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body {
  height: 100%;
}
.el-card >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
.el-card >>> .top h1 {
  margin: 20px 0 15px 0;
}

/* 内容+展开关闭按钮 */
.contentWidth {
  position: absolute;
  right: 0;
  top: 48%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

/* 左侧待回复列表 */
.el-card__body {
}
.el-table >>> .el-table__empty-block {
  width: 100% !important;
}
.el-table >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.el-table >>> tr {
  border-radius: 4px;
  overflow: hidden;
  margin: 5px 0;
}
.leftTable .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.leftTable .svg-icon {
  font-size: 15px;
  /* padding: 5px; */
  margin: 0 5px;
  cursor: pointer;
}
.el-table >>> table {
  width: 100% !important;
  table-layout: fixed !important;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #ebecf0;
}
.el-table >>> .el-table__body tr > td .cell {
  color: #2e3f5e;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
/* 微信图标 */
.el-table >>> .el-table__body tr > td .cell .svg-icon {
  font-size: 18px;
  /* padding: 5px; */
  margin: 0 5px;
  cursor: pointer;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
  display: none;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #fff !important;
  padding: 0;
}
.el-table >>> th.is-leaf,
.el-table >>> td {
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0;
}
.el-table >>> th.is-leaf {
  padding: 4px 0;
}
.el-table--scrollable-x .el-table__body-wrapper {
}
.el-table::before {
  height: 0;
}
.el-table >>> .ascending .sort-caret.ascending {
  border-bottom-color: #909aaa;
}

/* 中间订单详情 */
.lineItem {
  margin-bottom: 60px;
}
.lineItem h2 {
  font-size: 16px;
  margin: 10px 0;
  /* letter-spacing:2px; */
  line-height: 1.5em;
  font-weight: bold;
}
.lineItem h3 {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
}
.lineItem p {
  display: flex;
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}
.lineItem h2::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem > span {
  display: block;
  font-size: 15px;
  color: #aaa;
}
.lineItem span::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .accessory {
  margin-top: 15px;
}
.lineItem .accessory h3 {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
}
.lineItem .accessory p {
  display: flex;
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}
.lineItem .accessory p > a {
  margin-left: 10px;
  border-bottom: 1px solid #efefef;
  flex-grow: 1;
  padding-bottom: 10px;
}
.lineItem .accessory p::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .lItemContent {
  font-size: 14px;
  margin-top: 10px;
  line-height: 26px;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 10px;
}
/* .lineItem .lItemContent::before {
  font-size: 16px;
  color: #aaa;
} */
.lineItem .lItemContent > .lICon-reply {
  padding-left: 1em;
  font-size: 14px;
  color: #888;
  margin-top: 10px;
}
.lineItem .lItemContent > .lICon-reply > span {
  font-size: 14px;
  display: inline-block;
}
.lineItem .el-input {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
.lineItem .el-input >>> input {
  border: 0;
  height: 46px;
  line-height: 46px;
}

.replyCount {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.replyCount i {
  display: block;
  padding: 0 10px;
  height: 26px;
  line-height: 28px;
  text-align: center;
  font-size: 13px;
  border-radius: 4px;
  background-color: #f56c6c;
  color: #fff;
  font-style: normal;
}

/* 右侧 正式回复 */
.el-form {
  margin-bottom: 80px;
}
.expWidth {
  position: absolute;
  left: 0;
  top: 48%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
::v-deep .formalReply .el-textarea__inner {
  font-family: Microsoft Yahei;
}

.el-col {
  transition: all 0.3s;
}

.el-card >>> .ql-toolbar.ql-snow {
  border: 1px solid #e6ebf5;
}
.el-card >>> .ql-container.ql-snow {
  border: 1px solid #e6ebf5;
  border-top: 0;
}
.byTwoThirds {
  position: absolute;
  right: 0;
  width: 67%;
  height: 100%;
}
.formalReply {
  /* height: 70%; */
}
.formalReply .el-select {
  width: 100%;
  margin-bottom: 20px;
}
.formalReply >>> .w-e-text {
  padding: 0 1em;
}
.formalReply >>> .placeholder {
  margin-left: 0.5em;
}
.queryBtn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e6ebf5;
  z-index: 99999;
}
.queryBtn .el-button {
  width: 49.9%;
  margin: 0;
  border-radius: 0;
}
.queryBtn .el-button--medium {
  padding: 15px 20px;
}

.drawerMain {
  height: 100%;
  padding: 0 30px 30px 30px;
}
.drawerMain >>> .el-col {
  height: 100%;
}
.drawerMain >>> .dracon {
  height: 100%;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  padding: 20px;
}
.drawerMain >>> .dracon .draconTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawerMain .dracon i {
  font-style: normal;
}
.queryLibDetail h3 {
  margin-top: 8px;
}
.queryLibDetail p {
  font-size: 16px;
  line-height: 26px;
}

.otherBtn {
  position: absolute;
  right: 20px;
  top: 10px;
}
.otherBtn >>> .el-drawer__wrapper {
  /* z-index: 99999 !important; */
}
.otherBtn .el-button {
  color: #f5873b;
  padding: 8px 8px;
  font-size: 13px;
  margin-left: 3px;
}
/* 分页器 */
.pagination {
  margin-top: 20px;
  text-align: center;
}

/* 内容抽屉 */

/* 内容抽屉 end */

/* 选择的法条和附件 */
/* /提示宽度设置  */
.el-tooltip__popper {
  max-width: 60% !important;
}
.lawOrFile {
  margin-bottom: 80px;
}
.lawOrFile h3 {
  font-size: 14px;
  color: #909aaa;
  margin-top: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
.lawOrFile li {
  position: relative;
  font-size: 12px;
  line-height: 24px;
  color: #2e405e;
}
.lawOrFile li i {
  color: #f87a23;
  font-style: normal;
  cursor: pointer;
}

.lawOrFile li .tooltip-div {
  display: none;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  top: 30px;
  left: 0;
  z-index: 10003;
  padding: 15px;
}
.lawOrFile li .tooltip-div h3 {
  margin: 0;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  border-bottom: 1px solid #535151;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.lawOrFile li .tooltip-div p {
  color: #fff;
  line-height: 20px;
}
.lawOrFile li .tooltip-div > i {
  position: absolute;
  top: -16px;
  left: 20px;
  width: 0;
  height: 0;
  border: 8px solid rgba(0, 0, 0, 0.8);
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.lawOrFile li:hover .tooltip-div {
  display: inline-block;
}

/* 选择的法条和附件 end */

/* 查案例 */
.simulation {
  height: 100%;
}
/* 查案例 end */

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  /* z-index: 10002; */
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

</style>
